<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from 'moment'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '设备名称', key: 'deviceName', sortable: false},
    {title: '设备Ip', key: 'deviceIp', sortable: false},
    {title: '事件类型', key: 'eventName', sortable: false},
    {title: '发生时间', key: 'eventTime', sortable: false},
    {title: '发生地点', key: 'eventPlace', sortable: false},
    {title: '图片地址', key: 'eventImages', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const imgBaseUrl = ref("http://192.192.41.21:800/");

const search = ref('');
const name = ref(null);
const eventType = ref(null);
const isShowDialogStartDate = ref(false);
const isShowDialogEndDate = ref(false);
const startDate = ref(null);
const endDate = ref(null);
const dateSearch = ref(new Date());
const dateSearchEnd = ref(new Date());
watch(name, () => {
    search.value = name.value
})
watch(eventType, () => {
    search.value = eventType.value
})
watch(startDate, () => {
    search.value = startDate.value
})
watch(endDate, () => {
    search.value = endDate.value
})

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    axios.post('/deviceAbnormalEventRecord/selectBehavior', {
        pageNo: page,
        pageSize: itemsPerPage,
        eventType: eventType.value,
        startDate: startDate.value,
        endDate: endDate.value
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

function changeDate() {
    startDate.value = moment(dateSearch.value).format('YYYY-MM-DD')
    isShowDialogStartDate.value = false
}

function changeDateEnd() {
    endDate.value = moment(dateSearchEnd.value).format('YYYY-MM-DD')
    isShowDialogEndDate.value = false
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: itemsPerPage.value});
});
</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>行为报警</v-toolbar-title>
        <!-- <v-text-field v-model="name" :clearable="true" hide-details placeholder="查询名称"></v-text-field> -->
        <v-select v-model="eventType" :clearable="true" hide-details placeholder="事件类型" :items="[{value: '11', title: '徘徊事件'}, {value: '12', title: '移动事件'}, {value: '14', title: '跌倒事件'}]"></v-select>
        <v-text-field v-model="startDate" readonly :clearable="true" hide-details placeholder="开始时间" label="开始时间" @click="isShowDialogStartDate = true"></v-text-field>
        <v-dialog v-model="isShowDialogStartDate" max-width="500px">
            <v-date-picker v-model="dateSearch" @update:model-value="changeDate"></v-date-picker>
        </v-dialog>
        <v-text-field v-model="endDate" readonly :clearable="true" hide-details placeholder="结束时间" label="结束时间" @click="isShowDialogEndDate = true"></v-text-field>
        <v-dialog v-model="isShowDialogEndDate" max-width="500px">
            <v-date-picker v-model="dateSearchEnd" @update:model-value="changeDateEnd"></v-date-picker>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.eventImages="{ item }">
            <el-image :src="item.raw.eventImages" :preview-src-list="[item.raw.eventImages]" style="height: 50px;" alt=""></el-image>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
